<template>
	<layout>
		<view class="container">
			<view class="example">
				<!-- 展示不同的排列方式 -->
				<uni-forms ref="baseForm" :rules="rules" v-model="baseFormData" label-position="left"
					label-width="200rpx">
					<uni-section title="报修信息" type="line" padding>
						<uni-forms-item label="申请人" required name="userName">
							<!-- <uni-easyinput v-model="baseFormData.userName" disabled /> -->
							<span>{{detail.userName}}</span>
						</uni-forms-item>
						<uni-forms-item label="楼栋号" required name="applyName">
							<span>{{detail.buildingName}}</span>
						</uni-forms-item>
						<uni-forms-item label="宿舍号" required name="applyName">
							<span>{{detail.roomNo}}</span>
						</uni-forms-item>

						<uni-forms-item label="问题描述" name="remark">
							<span>{{detail.remark}}</span>
						</uni-forms-item>
						<uni-forms-item label="图片" name="attachList">
							<uni-file-picker readonly v-model="attachList" @select="select"
								file-mediatype="image"></uni-file-picker>
						</uni-forms-item>
					</uni-section>
					<uni-section title="检修信息" type="line" padding>
						<uni-forms-item label="状态" required name="status">
							<uni-data-checkbox v-model="baseFormData.status" :localdata="statusList" />
						</uni-forms-item>
						<uni-forms-item label="报修项目" required name="repairProject">
							<uni-easyinput v-model="baseFormData.repairProject" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="更换设备" required name="replaceItem">
							<uni-easyinput v-model="baseFormData.replaceItem" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="故障类型" required name="faultType">
							<uni-data-checkbox v-model="baseFormData.faultType" :localdata="faultTypeList" />
						</uni-forms-item>
						<uni-forms-item label="维修费用(元)" required name="maintenanceCost">
							<uni-easyinput type="number" v-model="baseFormData.maintenanceCost" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="检修说明" name="remark">
							<uni-easyinput type="textarea" v-model="baseFormData.serviceRemark" placeholder="请输入" />
						</uni-forms-item>
						<uni-forms-item label="图片" name="attachList">
							<uni-file-picker v-model="serviceAttachments" @select="select"
								file-mediatype="image"></uni-file-picker>
						</uni-forms-item>
						<uni-forms-item label="检修人" name="serviceName">
							<span class="leave-timeout">{{baseFormData.serviceName}}</span>
						</uni-forms-item>
						<uni-forms-item label="开始时间" required name="serviceTime">
							<uni-datetime-picker type="date" v-model="baseFormData.serviceTime" />
						</uni-forms-item>
					</uni-section>
				</uni-forms>
				<button class="submitBtn" type="primary" @click="submit('baseForm')">提交</button>
			</view>
		</view>
	</layout>
</template>

<script>
	import {
		repairjx,
		uploadImg,
		repairDetail
	} from '@/api/system/user.js'

	import {
		getToken
	} from '../../../utils/auth';
	import layout from '../../common/layout/layout.vue';
	import {
		formatDateTime
	} from '@/utils/common.js'

	export default {
		components: {
			layout
		},
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					leaveType: '',
					startTime: '',
					endTime: '',
					leaveDay: '',
					remark: '',
				},
				leaveTypes: [{
						value: '病假',
						text: "病假"
					},
					{
						value: '事假',
						text: "事假"
					},
				],
				statusList: [{
					text: '待检修',
					value: 0
				}, {
					text: '已检修',
					value: 1
				}],
				faultTypeList: [{
					text: '人为损坏',
					value: '人为损坏'
				}, {
					text: '自然损坏',
					value: '自然损坏'
				}],
				// 校验规则
				rules: {
					status: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					repairProject: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					replaceItem: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					faultType: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					maintenanceCost: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					serviceTime: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
				},
				detail: {

				},
				attachList: [],
				serviceAttachments: [],
				serviceName: '',
			}
		},
		computed: {

		},
		mounted() {
			this.baseFormData = {
				...this.baseFormData,
				serviceName: this.$store.state?.user?.userInfo?.nickName,
				serviceId: this.$store.state?.user?.userInfo?.userId,
			}
		},
		watch: {

		},
		onLoad(options) {
			this.getInfo(options)
		},
		onReady() {},
		methods: {
			formatDateTime,
			submit(ref) {
				console.log(this.$store.state?.user)
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					repairjx({
							...this.detail,
							...res,
							serviceAttachments: this.serviceAttachments
						})
						.then(data => {
							uni.showToast({
								title: '检修提交成功'
							})
							setTimeout(() => {
								this.$tab.navigateTo('/pages/repair/workerReportRepairList/index')
							}, 300)
						})
						.catch(data => {
							uni.showToast({
								title: data
							})
						})
				}).catch(err => {
					console.log('err', err);
				})
			},
			calcLeaveTimeout(start, end) {
				// 将输入的日期字符串转换为Date对象
				const startDate = new Date(start);
				const endDate = new Date(end);

				const timeDiff = endDate - startDate;
				const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

				return daysDiff + 1;
			},
			// 上传成功
			success(e) {
				console.log(e)
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			select(e) {
				console.log('选择文件：', e)
				const {
					tempFilePaths,
					tempFiles
				} = e;
				console.log(e)
				const _data = {
					name: 'file',
					filePath: tempFilePaths[0]
				}
				uploadImg(_data).then(response => {
					console.log(response)
					this.serviceAttachments.push({
						fileName: response.newFileName,
						filePath: response.url,
					})

				})
			},
			// 切换楼栋
			handleChange() {

			},
			getInfo(options) {
				repairDetail(options.id).then(response => {
					console.log(response.data);
					this.detail = response.data;
					this.attachList = (response.data.applyAttachments || []).map(c => {
						c.url = c.filePath;
						c.name = c.fileName;
						return c;
					})
					this.serviceAttachments = (response.data.serviceAttachments || []).map(c => {
						c.url = c.filePath;
						c.name = c.fileName;
						return c;
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		height: 100vh;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.leave-timeout {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.submitBtn {}
</style>